<template>
    <div class="bottomNav">
        <div class="bookrack bottomNavBox" @click="classType=1">
        <router-link to="/bookrack/bookrack">
          <div class="bookrackPc">
              <span class="iconfont icon-shujia pc"></span>
          </div>
          <div class="bookrackTx Tx">
              <span>书架</span>
          </div>
        </router-link>
        </div>
        <div class="bookrack bottomNavBox" @click="classType=2">
        <router-link to="/bookCity/bookCity">
            <div class="bookCityPc">
              <span class="iconfont icon-Group pc"></span>
            </div>
            <div class="bookCityTx Tx">
              <span>书城</span>
            </div>
        </router-link>
        </div>
        <div class="bookrack bottomNavBox" @click="classType=3">
          <router-link to="/mustRead/mustRead">
            <div class="rankingListPc">
              <span class="iconfont icon-paihangbang pc"></span>
            </div>
            <div class="rankingListTx Tx">
              <span>排行榜</span>
            </div>
          </router-link>
        </div>
        <div class="bookrack bottomNavBox" @click="classType=4">
          <router-link to="/bookClassify/bookClassify">
            <div class="classifyPc">
              <span class="iconfont icon-fenlei1 pc"></span>
            </div>
            <div class="classifyTx Tx">
              <span>分类</span>
            </div>
          </router-link>
        </div>
        <div class="bookrack bottomNavBox" @click="classType=5">
          <router-link to="/my/my">
            <div class="MyPc">
              <span class="iconfont icon-wode pc"></span>
            </div>
            <div class="MyTx Tx">
              <span>我的</span>
            </div>
          </router-link>
        </div>
    </div>
</template>

<script>
export default {
  data(){
    return{
      classType:1,
    }
  },
  methods:{
    
  },
}
</script>

<style lang="less">
.bottomNav{
  position: fixed;
  display: flex;
  min-width: 320px;
  max-width: 750px; 
  width: 100%;
  bottom: 0px;
  left: 0px;
  background-color: #fff;
  box-shadow: 0px 5px 10px #ccc;
  padding: 10px 0px;
  z-index: 10;
  .bottomNavBox{
    flex: 1;
    text-align: center;
    div{
      span.pc{
        font-size: 20px;
        color: #aaa;
      }
    }
    div.Tx{
      span{
        font-size: 14px;
        color: #aaa;
      }
    }
  }
  .bottomNavBox.BNactive{
    div{
      span.pc{
        color: #ffd11b;
      }
    }
    div.Tx{
      span{
        color: #ffd11b;
      }
    }
  }
}
</style>